<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>03_component_basic</title>
</head>
<body>

<div id="example1"></div>
<div id="example2"></div>

<script type="text/javascript" src="../js/react.development.js"></script>
<script type="text/javascript" src="../js/react-dom.development.js"></script>
<script type="text/javascript" src="../js/babel.min.js"></script>
<script type="text/babel">
    // 1. 定义组件
    /* 方式1：工厂函数组件(简单组件：没有转态的组件) */
    function MyComponent() {
        return <h2>工厂函数组件(简单组件)</h2>;
    }
    /* 方式2： ES6 类组件（复杂组件） */
    class MyComponent2 extends React.Component{
        render() {
            console.log(this);
            return <h2>ES6 类组件（复杂组件）</h2>
        }
    }
    // 2. 渲染组件标签
    ReactDOM.render(<MyComponent/>, document.getElementById("example1")); // 渲染的时候：调用方法，方法的返回值就是虚拟dom
    ReactDOM.render(<MyComponent2/>, document.getElementById("example2")); // 渲染的时候：创建出实例，在调用实例的render()方法，方法的返回值就是虚拟dom
</script>
</body>
</html>
